<template>
    <div class="payment" v-show="all">
        <el-form v-if="show" label-width="100px">
            <el-form-item label="银行名称:">
                <el-input style="width:300px;" v-model="bankName" />
            </el-form-item>
            <el-form-item label="支行名称:">
                <el-input style="width:300px;" v-model="accountOpeningBranch" />
            </el-form-item>
            <el-form-item label="银行卡号:">
                <el-input style="width:300px;" type="number" v-model="bankCardNumber" />
            </el-form-item>
            <el-form-item label="开户名称:">
                <el-input style="width:300px;" v-model="name" />
            </el-form-item>
            <el-form-item label="身份证号:">
                <el-input style="width:300px;" type="number" v-model="identityNumber" />
            </el-form-item>
            <el-form-item label>
                <el-button type="primary" @click="submit1">提交信息</el-button>
            </el-form-item>
        </el-form>
        <div v-else>
            <el-form label-width="100px">
                <el-form-item label="当前汇率:">
                <p>{{huilv}}</p>
            </el-form-item>
                <el-form-item label="输入金额:">
                    <el-input style="width:300px;" type="number" v-model="number" />
                </el-form-item>
                <el-form-item label>
                    <el-button type="primary" @click="submit2">立即提现</el-button>
                </el-form-item>
            </el-form>
            <div style="border:1px solid #eee;padding:10px;">
                <el-table border :data="tableData" style="width: 100%">
                <el-table-column prop="statusName" label="状态" min-width="100"></el-table-column>
                <el-table-column prop="bankUserName" label="姓名" min-width="100"></el-table-column>
                <el-table-column prop="name" label="出金数量" min-width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.amount}}({{scope.row.amountType}})</span>
                    </template>
                </el-table-column>
                <el-table-column prop="otcRatio" label="汇率" min-width="100"></el-table-column>
                <el-table-column prop="createTime" label="时间" min-width="100"></el-table-column>
            </el-table>
            </div>
            <el-pagination @current-change='fy'  background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
    </div>
</template>
<script>
// import { viewBanks, addBanks, outSale, otcSaleList,getRatio } from "../../api/api";
import qs from "qs";

export default {
    data() {
        return {
            all: false,
            show: true,
            number: "",
            bankName: "",
            accountOpeningBranch: "",
            bankCardNumber: "",
            name: "",
            identityNumber: "",
            tableData: [],
            pages: 1,
            total:1,
            huilv:"",
        
        };
    },
    created() {
        this.getBank();
        this.getSaleList();
        this.gethuilv();
    },
    methods: {
        gethuilv(){
            getRatio().then(res=>{
                console.log(res.data)
                this.huilv = res.data.data
            })
        },
        submit1() {
            var user = JSON.parse(sessionStorage.getItem("user"));
            //提交银行卡信息
            var params1 = {
                token: user.token,
                name: this.name,
                identityNumber: this.identityNumber,
                bankName: this.bankName,
                bankCardNumber: this.bankCardNumber,
                accountOpeningBranch: this.accountOpeningBranch
            };
            addBanks(qs.stringify(params1)).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: "提交成功！",
                        type: "success"
                    });
                    this.getBank();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        submit2() {
            if (this.number <= 0 || this.number == "") {
                this.$message.error("请输入正确数值");
                return false;
            }
            var user = JSON.parse(sessionStorage.getItem("user"));
            var params = {
                amount: this.number,
                token: user.token,
                bankId: this.bankMsg.id
            };
            outSale(qs.stringify(params)).then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.$message({
                        message: "提现成功，等待匹配！",
                        type: "success"
                    });
                    this.getSaleList();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        getBank() {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var params = {
                token: user.token
            };
            viewBanks(params).then(res => {
                if (res.data.code == 200) {
                    console.log(res.data.data, 6666);
                    this.bankMsg = res.data.data;
                    if (res.data.data == null) {
                        this.show = true;
                    } else {
                        this.show = false;
                    }
                    this.all = true;
                }
            });
        },
        getSaleList() {
            var token = JSON.parse(window.sessionStorage.getItem("user")).token;
            console.log(token);

            var params = {
                pageNum: this.pages,
                pageSize: 10,
                token: token
            };
            otcSaleList(qs.stringify(params)).then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.count
                }
            });
        },
        fy(val){
            console.log(val);
            this.pages = val
            this.getSaleList();
            
        }
    }
};
</script>
<style lang="scss" scoped>
.payment {
    padding: 50px 5%;
    box-sizing: border-box;
}
.size {
    background: #409eff;
    color: #f2f2f2;
}
</style>
